<template>
  <div>
    <div>
      <div class="top-operate">
        <!-- 第一行 -->
        <div>
          <div class="inline-flex">
            <el-select v-model="textCol" class="width-120">
              <el-option label="订单号" value="orderNo"></el-option>
              <el-option label="平台订单号" value="externalOrderNo"></el-option>
              <el-option label="买家姓名" value="customerNickname"></el-option>
              <el-option label="买家手机号" value="customerPhone"></el-option>
            </el-select>
            <el-input v-model="textValue" placeholder="请输入内容" class="width-200"></el-input>
          </div>
          <div class="inline-flex">
            <el-select v-model="timeCol" class="mar-l-10 width-120">
              <el-option label="创建时间" value="createTime"></el-option>
            </el-select>
            <el-date-picker v-model="timeValue"
              type="daterange"
              range-separator="至"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </div>
          <el-button-group class="mar-l-10">
            <el-button type="primary" @click="doSearch">查询</el-button>
            <el-button plain @click="doResetSearch">重置</el-button>
          </el-button-group>
        </div>
        <div class="pad-t-10">
          <el-button type="primary" @click="doAdd">新建订单</el-button>
          <el-button type="primary" @click="importOrderVisible = true">导入订单</el-button>
          <el-button type="primary" @click="doBatchSubmit">批量提交</el-button>
          <el-button @click="doDelete('')">批量删除</el-button>
        </div>
      </div>
      <!-- 内容列表 -->
      <div class="table-container">
        <el-table :data="dataList" v-loading="listLoading" @selection-change="handleSelectionChange" element-loading-text="加载中">
          <el-table-column width="45px" type="selection"></el-table-column>
          <el-table-column min-width="280px" label="订单信息" fixed="left">
            <template slot-scope="scope">
              <div class="flex v-align-c">
                <label v-if="scope.row.goodsImageUrl"><img :src="scope.row.goodsImageUrl" class="t-goods-pic"></label>
                <div class="font-14 pad-l-10 line-2">
                  <span :title="scope.row.goodsTitle">{{ scope.row.goodsTitle }}</span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column width="250px" label="订单号">
            <template slot-scope="scope">
              <div>{{scope.row.orderNo}}</div>
              <div v-if="scope.row.externalPlatformType">
                {{ dict.platformType[scope.row.externalPlatformType] }}：{{scope.row.externalOrderNo}}
              </div>
            </template>
          </el-table-column>
          <el-table-column width="150px" label="买家">
            <template slot-scope="scope">
              <div>{{ scope.row.customerNickname }}</div>
              <div class="font-10">{{ scope.row.customerPhone }}</div>
            </template>
          </el-table-column>
          <el-table-column width="120px" label="商品数量" align="center">
            <template slot-scope="scope">
              <div>{{scope.row.goodsNum}}</div>
            </template>
          </el-table-column>
          <el-table-column width="180px" label="订单金额">
            <template slot-scope="scope">
                <div>运费：￥{{ scope.row.freight }}</div>
                <div>商品：￥{{ (scope.row.orderAmount - scope.row.freight).toFixed(2) }}</div>
                <div class="font-blue">合计：￥{{ scope.row.orderAmount }}</div>
            </template>
          </el-table-column>
          <template v-if="distributorRoleFlag">
            <el-table-column width="180px" label="待付金额">
              <template slot-scope="scope">
                  <div>运费：￥{{ scope.row.orderFreightToThird }}</div>
                  <div>商品：￥{{ (scope.row.orderAmountToThird - scope.row.orderFreightToThird).toFixed(2) }}</div>
                  <div class="font-blue">合计：￥{{ scope.row.orderAmountToThird }}</div>
              </template>
            </el-table-column>
          </template>
          <el-table-column width="200px" label="创建时间" prop="createTime" align="center">
          </el-table-column>
          <el-table-column width="90px" label="操作" align="right" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" size="medium" class="table-btn" @click="doLinkDetail(scope.row)">查看详情</el-button>
              <el-button type="text" size="medium" class="table-btn" @click="doSubmit(scope.row)">提交</el-button>
              <el-button type="text" size="medium" class="table-btn" @click="doDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 列表分页 -->
      <div class="pagination">
        <el-pagination background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchListQuery.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="searchListQuery.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>

    <!-- 手动订单导入dialog -->
    <el-dialog width="600px" v-el-drag-dialog title="订单导入" :visible.sync="importOrderVisible" :show-close="false">
      <hand-order-import :showFlag="importOrderVisible" @callback="doCallbackImportOrder"></hand-order-import>
    </el-dialog>

  </div>
</template>

<script>
  import { pageHandOrder, doSubmitHandOrder, deleteHandOrder } from '@/api/order/handOrder'
  import { getDictByGroupName } from '@/api/common/common'
  import handOrderImport from '../hand-order-import'
  import elDragDialog from '@/directive/el-dragDialog'

  export default {
    components: { handOrderImport },
    directives: {
      elDragDialog
    },
    data() {
      return {
        // 文本model
        textCol: 'orderNo',
        textValue: '',
        // 时间model
        timeCol: 'createTime',
        timeValue: [],
        // 默认查询条件
        defaultQuery: {
          currentPage: 1,
          size: 10,
          handOrderStatus: 0,
          enterpriseId: '',
          apartOrderSource: undefined
        },
        // 查询条件
        searchListQuery: {},
        // 数据字典
        dict: {
          platformType: {}
        },
        total: 0,
        listLoading: false,
        importOrderVisible: false,
        // 分销商角色flag
        distributorRoleFlag: false,
        multipleSelection: [],
        dataList: []
      }
    },
    // 初始化页面
    created() {
      Object.assign(this.searchListQuery, this.defaultQuery)
      // 获取数据字典
      getDictByGroupName('ThirdOrderDTO').then(response => {
        Object.assign(this.dict, response.data)
      })
      this.distributorRoleFlag = this.getSystemRoleType() === '4'
      this.initList()
    },
    methods: {
      // 初始化
      initList() {
        this.listLoading = true
        const size = this.searchListQuery.size
        const currentPage = this.searchListQuery.currentPage
        this.searchListQuery = { ... this.defaultQuery }
        this.searchListQuery.size = size
        this.searchListQuery.currentPage = currentPage
        this.searchListQuery[this.textCol] = this.textValue
        this.searchListQuery.dateColumn = this.timeCol
        this.searchListQuery.startDate = (this.timeValue && this.timeValue.length > 0) ? this.timeValue[0] : ''
        this.searchListQuery.endDate = (this.timeValue && this.timeValue.length > 1) ? this.timeValue[1] : ''
        this.searchListQuery.enterpriseId = this.getEnterpriseId()
        this.searchListQuery.memberId = this.getMemberId()
        pageHandOrder(this.searchListQuery).then(response => {
          if (response.isError) return
          this.listLoading = false
          this.total = response.data.total
          this.dataList = response.data.records
          Object.assign(this.dict, response.data.dict)
        })
      },
      // 查询事件
      doSearch() {
        this.searchListQuery.currentPage = 1
        this.initList()
      },
      // 重置事件
      doResetSearch() {
        const originData = this.$options.data()
        this.textCol = originData.textCol
        this.textValue = originData.textValue
        this.timeCol = originData.timeCol
        this.timeValue = originData.timeValue
        this.defaultQuery = originData.defaultQuery
        this.doSearch()
      },
      // 新建订单事件
      doAdd() {
        this.$router.push({ path: '/order/change-order/detail' })
      },
      // 导入事件回调
      doCallbackImportOrder(callbackFlag) {
        if (callbackFlag) {
          this.initList()
          this.$emit('refreshStat')
        }
        this.importOrderVisible = false
      },
      // 批量提交处理
      doBatchSubmit() {
        const that = this
        if (that.multipleSelection.length === 0) {
          that.$message({ type: 'error', message: '请勾选数据' })
          return
        }
        const params = {
          enterpriseId: that.getEnterpriseId(),
          handOrderIds: that.multipleSelection.map(item => item.handOrderId)
        }
        this.$bus.$emit('asyncHandle', '300002', params, () => {
          this.$emit('refreshStat')
          this.initList()
        })
      },
      // 跳转详情事件
      doLinkDetail(row) {
        this.$router.push({ path: '/order/change-order/detail', query: { handOrderId: row.handOrderId }})
      },
      // 提交事件
      doSubmit(row) {
        this.$confirm('确定要提交吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.listLoading = true
          doSubmitHandOrder(row.handOrderId).then(response => {
            if (response.isError) {
              this.listLoading = false
              return
            }
            this.$message({ type: 'success', message: '提交成功' })
            this.initList()
            this.$emit('refreshStat')
          })
        }).catch(() => {
        })
      },
      // 删除事件
      doDelete(row) {
        let handOrderIds = []
        if (!row) {
          if (this.multipleSelection.length === 0) {
            this.$message({ type: 'error', message: '请勾选数据' })
            return
          }
          handOrderIds = this.multipleSelection.map(item => item.handOrderId)
        } else {
          handOrderIds.push(row.handOrderId)
        }
        this.$confirm('确定要删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.listLoading = true
          deleteHandOrder(handOrderIds).then(response => {
            if (response.isError) {
              this.listLoading = false
              return
            }
            this.$message({ type: 'success', message: '删除成功' })
            this.initList()
            this.$emit('refreshStat')
          })
        }).catch(() => {
        })
      },
      // 勾选事件
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.initList()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.initList()
      }
    }
  }
</script>

<style lang="less" scoped>

</style>
